<?php
  //Buffer larger content areas like the main page content
  ob_start();
?>

<br />

<div class="container-fluid">
    
    <!-- http://css3.bradshawenterprises.com/transforms/ -->
    
    <div class="slider-container">
        <p class="scroll-sentence-1">X Rotation (<span></span> degrees)</p>
        <div id="slider-1"></div>
    </div>
    
    <div class="slider-container">
        <p class="scroll-sentence-2">Y Rotation (<span></span> degrees)</p>
        <div id="slider-2"></div>
    </div>
    
    <div class="slider-container">
        <p class="scroll-sentence-3">Z Rotation (<span></span> degrees)</p>
        <div id="slider-3"></div>
    </div>
    
    <div class="slider-container">
        <p class="scroll-sentence-4">Perspective (<span></span> px)</p>
        <div id="slider-4"></div>
    </div>
    
    <br />
    
</div>



<?php
  //Assign all Page Specific variables
  $pagemaincontent = ob_get_contents();
  ob_end_clean();
  $pagetitle = "Richard Franklin's Web Lab";
  
  //Add javascripts here
  $pagestyles = "
  	<link rel='stylesheet' href='css/vendor/jquery-ui-slider/jquery-ui-1.10.4.custom.css'>
  ";
  $pagescripts = "
  	<script src='js/vendor/jquery-ui-slider/jquery-ui-1.10.4.custom.min.js'></script>
        <script>
            $(function() {
                $('#slider-1').slider({
                min: -180,
                max: 180,
                value: 0, 
                slide: function(event, ui) { 
                        $('.scroll-sentence-1 span').html(ui.value);
                    }                 
                });
                $('#slider-2').slider({
                min: -180,
                max: 180,
                value: 0,
                slide: function(event, ui) { 
                        $('.scroll-sentence-2 span').html(ui.value);
                    }                 
                });
                $('#slider-3').slider({
                min: -180,
                max: 180,
                value: 0,
                slide: function(event, ui) { 
                        $('.scroll-sentence-3 span').html(ui.value);
                    }                 
                });
                $('#slider-4').slider({
                min: -180,
                max: 180,
                value: 0,
                slide: function(event, ui) { 
                        $('.scroll-sentence-4 span').html(ui.value);
                    }                 
                });
                
            });
            
            
        </script>
  ";
  
  //Apply the template
  include("master.tpl.php");
?>